<template>
    <div id="decoration">
      <!-- <haders title="店铺装修"></haders>-->
		<scroller ref="scroller"> 
			<div class="decora">
				<mt-field label="店铺名称" placeholder="请输入店铺名称" v-model="shopname"></mt-field>
				<mt-field label="店铺简介" placeholder="请输入店铺简介"  v-model="shopbrief"></mt-field>
				<mt-field label="联系人" placeholder="请输入联系人"  v-model="contacts"></mt-field>
				<mt-field label="联系人电话" placeholder="请输入联系人电话" type="tel" v-model="phone"></mt-field>
				<mt-field label="选择区域" placeholder="选择省、市、区" v-model="addres" :readonly="true" @click.native="selquyu"></mt-field>
				<mt-field label="详细地址" placeholder="请输入详细地址"  v-model="adddetails">
					<span class="loca">
						<i class="iconfont icon-dizhi"></i>
						定位
					</span>
				</mt-field>
				<div class="maps">
					<img src="../../../assets/other/error.png" />
				</div>			
			</div>
		</scroller>
		
		<footer>
			<a>保存</a>
		</footer>
		
		<mt-popup v-model="popupVisible" position="bottom">
			<div class="selected"> 
				<v-distpicker type="mobile" @selected="onSelected"></v-distpicker> 
			</div> 
		</mt-popup>
		
    </div>    
</template>
<script> 
import VDistpicker from 'v-distpicker';
import { Popup } from 'mint-ui';
import { Field } from 'mint-ui'; 
export default { 
  name: 'decoration',
  components:{
	VDistpicker,
	Popup,
	Field 
  },
  data () {
    return {
         popupVisible:false,
          type:false,
          shopname:'',
          shopbrief:'',
          contacts:'',
          phone:'',
          addres:'',
          adddetails:''
    }
  },
  mounted(){

  },
  methods:{
	onSelected(data) { 
	 	this.addres=data.province.value + '/' + data.city.value + '/' + data.area.value
	 	this.popupVisible=false;
	 	console.log(this.addres);
   },
   radioset:function(){ 
		this.type= !this.type;
	},
	selquyu:function(){
		console.log(123);
		this.popupVisible=true;
	}
  }
}
</script>
<style scoped>
.decora{
	padding-bottom: 1rem;
}
footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			z-index: 100;
			height: 1rem;
			line-height: 1rem;
		}
		
		footer a {
			display: block;
			width: 100%;
			text-align: center;
			font-size: 0.453333rem;
			color: #fff;
			font-weight: 500;
			border-top-left-radius: 0.066666rem;
			border-top-right-radius: 0.066666rem;
			background-color: #6530E0;
		}
	.mint-popup {
		width: 100%;
	}
	.selected{
		width: 100%;
		height: 6rem;
	}
	.setck{
		background-color:#fff;
		margin-top:0.266666rem;
		padding:0.3rem 0.2rem;
		font-size:0.346666rem;
	}
	.setck i{
		font-size: 0.506666rem;
		float: left;
		margin-right: 0.2rem;
	}
	.setck i.icon-xuanzhong1{
		color:#26a2ff;
	}
	.setck i.icon-danxuankuangxuanzhong{
		color: #CCCCCC;
	}
	.mint-cell-wrapper{
		font-size: 0.373333rem !important;
	}
	.loca{
		display: inline-block;
	}
	.maps{
		width: 100%;
		height: 6rem;
		padding:0.5rem;
		background-color: #fff;
		border-top:1px solid #CCCCCC;
	}
	.maps img{
		width: 100%;
		height: 100%;
	}
</style>
